<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/20 0020
  Time: 10:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>layUi入门</title>
    <link rel="stylesheet" href="../layui/layui/css/layui.css">
    <!-- 你的HTML代码 -->

    <script src="../layui/layui/layui.js"></script>
    <script type="text/html" id="userToolBar">
        <button class="layui-btn layui-btn-sm" lay-event="add" style="width: 90px;font-size: 15px;"><i
                class="layui-icon">&#xe654;</i>新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAll" style="width: 90px;font-size: 15px;">批量删除</button>
        <div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="search"><i class="layui-icon layui-icon-search"></i></div>
        <input type="text" id="userName" style="width:200px;float:right;height:30px;" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </script>
    <style>
        *{
            font-size: 20px;
            font-family: 微软雅黑;
        }
    </style>
        <script type="text/javascript">

        layui.use(['element', 'form', 'table', 'layer', 'laydate'], function () {
            var layer = layui.layer;

            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            var formSelects = layui.formSelects;
            var laydate = layui.laydate;
            //新增提交
            form.on('submit(addsubmit)', function(data){
                var formData=$('#addform').serialize();
                $.post("../UserServlet?method=insertUser",formData,function(msg){
                    if(msg>0){
                        table.reload('userTable');
                        layer.closeAll();
                        layer.msg('添加成功',{
                            title : '提示',
                            area : [ '200px',
                                '140px' ],
                            time : 0,
                            btn : [ '知道了' ]
                        });
                    }else{
                        layer.closeAll();
                        layer.msg('添加失败',{
                            title : '提示',
                            area : [ '200px',
                                '140px' ],
                            time : 0,
                            btn : [ '知道了' ]
                        });
                    }
                });
                return false;
            });
            //修改提交
            form.on('submit(editsubmit)', function(data){
                var formData=$('#editform').serialize();
                $.post("../UserServlet?method=updateUser",formData,function(msg){
                    if(msg>0){
                        table.reload('userTable');
                        layer.closeAll();
                        layer.msg('修改成功',{
                            title : '提示',
                            area : [ '200px',
                                '140px' ],
                            time : 0,
                            btn : [ '知道了' ]
                        });
                    }else{
                        layer.closeAll();
                        layer.msg('修改失败',{
                            title : '提示',
                            area : [ '200px',
                                '140px' ],
                            time : 0,
                            btn : [ '知道了' ]
                        });
                    }
                });
                return false;
            });
            table.render({
                elem: '#userTable',
                url: '../UserServlet?method=selectUser',
                page: true,
                height: 651,
                toolbar: '#userToolBar',//显示在表头的工具条
                //minLength:80,
                cols: [[
                    {
                        field: 'userId',
                        align: 'center',
                        checkbox:true,
                        title: '用户ID',
                        style: 'color: #01BDF4;'
                    }, {
                        field: 'userName',
                        align: 'center',
                        title: '用户名称',
                    }, {
                        field: 'userPwd',
                        title: '密码',
                        align: 'center',


                    }, {
                        field: 'roleId',
                        title: '角色ID',
                        align: 'center',

                    },
                    {
                        fixed : 'right',
                        title : '操作',
                        toolbar : '#barDemo',//绑定一个工具条
                    }
                ]]
            });
            //给工具条的按钮添加事件
            table.on('toolbar(userTable)',function (obj) {
                //获取选中复选框的对象，
                var checkStatus=table.checkStatus(obj.config.id);//得到表格选中行的ID
                switch (obj.event) {
                    case 'add':
                        $("#addform")[0].reset();
                        var index=layer.open({
                            type: 1,
                            area:["400px","480px"],
                            title: '添加用户信息',
                            closeBtn: 1,
                            move:false,
                            content:$("#addContent"),
                            btn:[]
                        });
                        $.ajax({
                            url:'../RoleServlet?method=selectRole',
                            dataType:'json',
                            type:'post',
                            success:function(obj){

                                    var leng=$('#roleId').children("option").length;
                                    if (leng!=0){

                                    }else{
                                        $.each(obj.data,function(index,item){
                                        $('#roleId').append(new Option(item.roleName,item.roleId));//往下拉菜单里添加元素
                                        })
                                    }

                                form.render();//菜单渲染 把内容加载进去
                            }
                        })
                        form.render();
                        break;
                    case 'search':
                        var userName= $("#userName").val();
                        //表格的重新加载事件
                        table.reload('userTable', {
                            method: 'post'
                            , where: {
                                'userName': userName
                            }
                            , page: {
                                curr: 1
                            }
                        });

                        break;
                    case 'deleteAll':
                        var data = checkStatus.data;
                        if(data.length==0){
                            layer.msg("请至少选择一条数据",)
                        }else
                        {
                            var ids=[];
                            for (var i = 0; i <data.length; i++) {
                                ids.push(data[i].userId);
                            }
                            layer.confirm('真的删除行么',{icon: 2}, function(index){
                                layer.close(index);
                                $.post("../UserServlet?method=deleteUser", {userId:ids.join(',')},function(msg){
                                    table.reload('userTable');
                                    layer.msg('删除'+checkStatus.data.length+'条记录', {
                                        title:'提示',
                                        area: ['200px', '140px'],
                                        time: 0,
                                        btn: ['知道了']
                                    });
                                });
                            });
                        }
                        break;
                }
            });
            //给表格编辑，删除按钮添加点击事件
           table.on('tool(userTable)', function(obj) {
                var data = obj.data;//得到删除行整行的数据
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么',{icon: 2}, function(index){
                        layer.close(index);
                        $.post("../UserServlet?method=deleteUser", {userId:data.userId+""},function(msg){
                            table.reload('userTable');
                        });

                    });
                } else if (obj.event === 'edit') {


                    form.val('editform',$.parseJSON(JSON.stringify(data)));
                    var index = layer.open({
                        type: 1,
                        title: '修改员工',
                        area:["400px","480px"],
                        closeBtn: 1,
                        move:false,
                        content:$('#editContent')
                    });
                    $.ajax({
                        url:'../RoleServlet?method=selectRole',
                        dataType:'json',
                        type:'post',
                        success:function(obj){

                            var leng=$('#roleId_2').children("option").length;
                            if (leng!=0){

                            }else{
                                $.each(obj.data,function(index,item){
                                    $('#roleId_2').append(new Option(item.roleName,item.roleId));//往下拉菜单里添加元素
                                })
                            }


                            $("#roleId_2 option[value='"+data.roleId+"']").attr("selected", "selected");

                            form.render();//菜单渲染 把内容加载进去
                        }
                    })
                    form.render();
                };
            })
        });

    </script>
</head>
<body style="overflow: auto; background-color: white;" class="layui-view-body layui-content">
<blockquote class="layui-elem-quote news_search">

    <div>
        <!--表格-->
        <table id="userTable" lay-filter="userTable"></table>
        <!--工具条-->
        <div style="display: none;" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit" style="width: 60px;font-size: 15px;"><i
                    class="layui-icon">&#xe642;</i>编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="width: 60px;font-size: 15px;"><i
                class="layui-icon">&#xe640;</i>删除</a>

        </div>
    </div>
</blockquote>
    <!--增加的div内容-->
    <div id="addContent"
         style="display: none; height: 100%; height: 100%; text-align: center;">
        <form id="addform" lay-filter="addform"
              class="layui-form layui-form-pane"
              style="margin: 30px auto; display: inline-block;">
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">用户ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="userId" lay-verify="required"
                           autocomplete="off" placeholder="请输入用户ID" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName" lay-verify="required"
                           autocomplete="off" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-inline">
                    <input type="password" name="userPwd" lay-verify="required"
                           autocomplete="off" placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">请选择角色</label>
                <div class="layui-input-inline">
                    <select id="roleId" name="roleId" xm-select="add" xm-select-radio=""
                            xm-select-search="" lay-verify="required"
                            xm-select-direction="down" xm-select-search-type="dl">
                    </select>
                </div>
            </div>
            <div style="position: absolute; bottom: 100px; margin-left: 45px;">
                <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                    <i class="layui-icon">&#x1005;</i>添加
                </button>
                <button class="layui-btn layui-bg-red cancel" type="button">
                    <i class="layui-icon">&#x1006;</i>取消
                </button>
            </div>
        </form>
    </div>

    <!--修改的div内容-->
    <div id="editContent"
         style="display: none; height: 100%; height: 100%; text-align: center;">
        <form id="editform" lay-filter="editform"
              class="layui-form layui-form-pane"
              style="margin: 30px auto; display: inline-block;">
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">用户ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="userId" lay-verify="required"
                           autocomplete="off" placeholder="请输入用户ID" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName" lay-verify="required"
                           autocomplete="off" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-inline">
                    <input type="password" name="userPwd" lay-verify="required"
                           autocomplete="off" placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">请选择角色</label>
                <div class="layui-input-inline">
                    <select id="roleId_2" name="roleId" xm-select="add" xm-select-radio=""
                            xm-select-search="" lay-verify="required"
                            xm-select-direction="down" xm-select-search-type="dl">
                    </select>
                </div>
            </div>
            <div style="position: absolute;  bottom: 100px; margin-left: 45px; ">
                <button class="layui-btn" lay-submit="" lay-filter="editsubmit">
                    <i class="layui-icon">&#x1005;</i>添加
                </button>
                <button class="layui-btn layui-bg-red cancel" type="button">
                    <i class="layui-icon">&#x1006;</i>取消
                </button>
            </div>
        </form>
    </div>
</body>
</html>
